<template>
  <div class="pages-contain-view">
    <el-card v-loading="chartLoading">
      <div class="chart-list-container flex_justify_space_around">
        <div id="doughnutChart" :style="{width: '400px', height: '350px'}"></div>
        <div id="solidChart" :style="{width: '400px', height: '350px'}"></div>
      </div>
    </el-card>
    <el-card v-loading="chartLoading" style="margin-top:10px">
      <div class="chart-list-container flex_justify_space_around">
        <div id="nightingaleChart" :style="{width:' 100% ',height: '400px'}"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { pieCharts } from "@/api/chart";
let title = {
  text: "热门语言统计",
  subtext: "纯属虚构",
  x: "center"
};
let tooltip = {
  trigger: "item",
  formatter: "{a} <br/>{b}: {c} ({d}%)"
};
let legend = {
  orient: "vertical",
  x: "left",
  data: []
};
export default {
  data() {
    return {
      chartLoading: false,
      //空心饼图
      doughnutChart: {
        title: title,
        tooltip: tooltip,
        legend: legend,
        series: [
          {
            name: "语言",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: []
          }
        ]
      },
      //实心饼图
      solidChart: {
        title: title,
        tooltip: tooltip,
        legend: legend,
        series: [
          {
            name: "语言",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },
      //南丁格尔玫瑰图
      nightingaleChart: {
        title: title,
        tooltip: tooltip,
        legend: {
          x: "center",
          y: "bottom",
          data: []
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ["pie", "funnel"]
            },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        series: [
          {
            name: "半径模式",
            type: "pie",
            radius: [20, 110],
            center: ["25%", "50%"],
            roseType: "radius",
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: true
              }
            },
            lableLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: true
              }
            },
            data: []
          },
          {
            name: "面积模式",
            type: "pie",
            radius: [30, 110],
            center: ["75%", "50%"],
            roseType: "area",
            data: []
          }
        ]
      }
    };
  },
  mounted() {
    this.getPieCharts();
  },
  methods: {
    async getPieCharts() {
      this.chartLoading = true;
      let res = await pieCharts();
      if (res) {
        this.chartLoading = false;
        //空心饼图
        this.doughnutChart.series[0].data = res.doughnut;
        this.doughnutChart.legend.data = res.doughnut;
        //实心饼图
        this.solidChart.series[0].data = res.solid;
        this.solidChart.legend.data = res.solid;
        //南丁格尔玫瑰图
        this.nightingaleChart.series[0].data = res.nightingale;
        this.nightingaleChart.series[1].data = res.nightingale;
        this.nightingaleChart.legend.data = res.nightingale;
        
        let doughnutChart = this.Ech.init(
          document.getElementById("doughnutChart")
        );
        doughnutChart.setOption(this.doughnutChart);
        let solidChart = this.Ech.init(document.getElementById("solidChart"));
        solidChart.setOption(this.solidChart);
        let nightingaleChart = this.Ech.init(
          document.getElementById("nightingaleChart")
        );
        nightingaleChart.setOption(this.nightingaleChart);
      }
    }
  }
};
</script>

<style scoped>
</style>